<!-- 景区详情页 -->
<template>
  <div class="product">
    <div>
      <div class="bj">
        <van-nav-bar title="景区详情" @click-left="onClickLeft" style="background: #68c5ba;position: fixed;width: 100%;">
          <van-icon name="arrow-left" slot="left" />
        </van-nav-bar>
      </div>

      <div style="width: 100%;height: 46px;"></div>
      <div class="swipe">
        <van-swipe class="swipe_swipe" :autoplay="3000" :show-indicators="false">
          <van-swipe-item class="swipe_img" v-for="(image, index) in images" :key="index">
            <img :src="image.ImgSrc" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="introduction" style="font-size: 14px;">
        <div class="introduction-details">
          <div class="introduction-title">
            <p style="font-size: 18px;color: rgb(40, 40, 40);height: 30px;">{{scenicspots.Name}}</p>
            <p>文旅局推荐评分</p>
          </div>
          <div class="introduction-notice" style="display: flex;height: 30px;color: #68C5BA;">
            <div style="display: flex;">
              <!-- <span>{{data.Info}}</span> -->
            </div>
            <p style="font-size: 20px;">{{scenicspots.Score}}分</p>
          </div>
          <div>
            <p style="font-size: 13px;">{{scenicspots.Info}}</p>
          </div>
          <van-popup v-model="map" position="right" style="height: 100%;width: 100%;z-index: 99999999;">
            <van-nav-bar title="景区地图" @click-left="clickmap" style="background: #68c5ba;z-index: 999999999;width: 100%;">
              <van-icon class="centerditu" name="arrow-left" slot="left" color="#FFFFFF" />
            </van-nav-bar>
            <baidu-map :center="center" :zoom="zoom" @ready="handler" class="map"></baidu-map>
          </van-popup>
          <div style="font-size: 12px;">
            <div class="introduction-time">
              <div style="display: flex;">
                <van-icon name="underway" />&#8194;<div>08:30-16:30</div>
              </div>
              <van-icon name="arrow" />
            </div>
            <div class="introduction-time" @click="ditumap">
              <div style="display: flex;">
                <van-icon name="location-o" />&#8194;<div>{{scenicspots.Prov}}{{scenicspots.City}}{{scenicspots.Dist}}{{scenicspots.Name}}</div>
              </div>
              <van-icon name="arrow" />
            </div>
          </div>
        </div>

      </div>
      <div id="menus" class="box2">
        <div @click="gotoShow('notice')" :class="[isSelectedItem[0] ? 'active' : '' ,'menu-item']">预定须知</div>
        <div @click="gotoShow('feiyong')" :class="[isSelectedItem[1] ? 'active' : '' ,'menu-item']">特色</div>
      </div>
      <div class="purchase" v-show="Ticketdd != ''">
        <div class="purchase-all">
          <div class="purchase-top">
            <van-icon name="like-o" />
            <div style="color: rgb(40, 40, 40);font-weight: 400;font-size: 14px;margin-left: 5px;">购票推荐</div>
          </div>
          <div class="purchase-ticket" v-for="(item,index) in Ticketdd" :key="index">
            <div style="width: 75%;">
              <div style="height: 30px;font-size: 14px;">{{item.Name}}</div>
              <div style="display: flex;font-size: 12px;">
                <div style="display: flex;align-items: center;" v-for="(attr,index) in item.Attr" :key="index">
                  &#8194;
                  <van-icon name="passed" />&#8194;
                  <span style="">{{attr}}</span>
                </div>
              </div>
            </div>
            <div style="text-align: right;width: 30%;">
              <s>￥{{item.OriginalPrice}}</s>
              <div style="display: flex;align-items: center;height: 30px;font-size: 12px;">低至<h2 style="font-size: 20px;margin: 2px;">￥{{item.Price}}</h2>起</div>
              <van-button @click="onClickbook(item.gSN)" style="width: 90px;font-size: 16px;" round block size='small' color='#46d0ca '>预定</van-button>
            </div>
          </div>
          <div style="height: 30px;"></div>
        </div>
      </div>
      <div class="comment">
        <div class="comment-box">
          <div style="display: flex;height: 40px;align-items: center;">
            <van-icon name="star-o" />
            <span style="margin-left: 5px;margin-top: 2px;color: rgb(40, 40, 40);font-weight: 400;font-size: 14px;">用户点评</span>
          </div>
          <div style="display: flex;">
            <div @click="likedataA(2)" class="zan" :class="{'likeactive':scenicspots.IsLike == true}">
              喜欢{{scenicspots.LikeNum}}
            </div>
            <div @click="likedataB(1)" class="zan" :class="{'likeactive':scenicspots.IsCollect == true}">
              收藏{{scenicspots.CollectNum}}
            </div>
            <div class="zan">
              浏览 {{scenicspots.ViewNum}}
            </div>
          </div>
          <div style="height: 30px;width: 100%;"></div>
        </div>
      </div>
      <div class="recommend">
        <div class="recommend-box">
          <div style="display: flex;height: 2.5rem;align-items: center;justify-content: space-between;">
            <div style="display: flex;align-items: center;">
              <van-icon name="bookmark-o" />
              <span style="margin-left: 5px;color: rgb(40, 40, 40);font-weight: 400;font-size: 14px;">其他推荐</span>
            </div>
            <div style="display: flex;align-items: center;">更多
              <van-icon name="arrow" />
            </div>
          </div>
          <div style="">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div v-for="(itme,index) in datares" :key='index' class="swiper-slide" @click="swiper(itme.resSN)">
                  <img style="width: 100%;height: 80%;" :src="itme.Cover" />
                  <p style="text-align: center;">{{itme.Name}}</p>
                </div>
              </div>
            </div>
          </div>
          <div style="height: 30px;width: 100%;"></div>
        </div>
      </div>
    </div>
    <div class="blank" id="blank" style="display: none;"></div>
    <div id="notice" class="product-content">
      <div v-html="scenicspots.Desc">
      </div>
    </div>
    <div id="feiyong" class="product-content">
      <div class="img" v-html="scenicspots.Content">
      </div>

    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import {
  resourceDetails,
  goodsList,
  MyMarkDo,
  resourceList
} from '@/api/home.js'
export default {

  data () {
    return {
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 30
      },
      images: [],
      // data: data[0], //模拟数据
      scenicspots: {}, // 详情数据
      like: false,
      Ticketdd: [], // 门票数组
      // List: [], //推荐景区数组
      datares: [], // 推荐景区数组
      // attrdata:[],//门票attr数组
      IsLike: false, // 我喜欢
      IsNeed: false, // 我需要
      IsNoInterest: false, // 没兴趣
      mark: '', // 标识
      map: false, // 弹出地图
      // 地图
      center: {
        lng: 0,
        lat: 0
      },
      // position: {
      //   lng: 0,
      //   lat: 0
      // },
      zoom: 3,
      //  mapshow: false, //地图文字
      isSelectedItem: [true, false, false] // 切换
    }
  },
  updated () {
    let swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      }
    })
  },
  beforeRouteLeave (to, from, next) {
    // 设置下一个路由的 meta
    if (to.name == 'Ordersynthesis') {
      to.meta.keepAlive = false // C 跳转到 A 时让 A 缓存
      next()
    } else {
      to.meta.keepAlive = true // C 跳转到 A 时让 A 不缓存，即刷新
      next()
    }
  },
  created () {
    let that = this
    window.onscroll = function () {
      let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
      if (document.getElementById('feiyong')) {
        // 这里是控制的是导航的隐藏固定跟动态滚动的
        if (scrollTop < document.getElementById('notice').offsetTop - 400 - document.getElementById('menus').offsetHeight) {
          // console.log(1)
          document.getElementById('menus').setAttribute('class', 'box2')
          // document.getElementById('blank').style.display = 'none';
        } else {
          document.getElementById('menus').setAttribute('class', 'box2 menus-top')
          // document.getElementById('blank').style.display = 'block';
        }
        if (scrollTop > document.getElementById('feiyong').offsetTop - 150 - document.getElementById('menus')
          .offsetHeight) {
          that.isSelectedItem = [false, true]
        } else {
          that.isSelectedItem = [true, false]
        }
      }
    }
  },
  methods: {
    gotoShow: function (id) {
      var obj = document.getElementById(id)
      var total = obj.offsetTop - 130
      if (id === 'feiyongZhuan' || id === 'noticeZhuan') {
        var a = document.getElementById('menusZhuan').offsetHeight
        document.getElementById('menusZhuan').setAttribute('class', 'box2 menus-top')
        document.getElementById('blankZhuan').style.display = 'block'
        total = total - a + 1
      }
      document.body.scrollTop = total
      document.documentElement.scrollTop = total
      document.pageYOffset = total
    },
    clickmap () {
      this.map = false
    },
    ditumap () {
      this.map = true
      // console.log(1)
    },
    // 地图
    infoWindowClose () { // 点击出现文字事件
      this.show = false
    },
    infoWindowOpen () {
      this.show = true
    },
    handler ({
      BMap,
      map
    }) {
      // console.log(BMap, map)
      this.center.lng = this.scenicspots.Lng
      this.center.lat = this.scenicspots.lat
      // console.log(this.center)
      this.zoom = 15
      // console.log(map.mc)
    },
    // ----------------------
    onClickLeft () { // 返回
      // console.log('返回');
      this.$router.back()
    },
    onClickbook (gSN) { // 跳转订单详情
      // this.$router.push('/vdetails');
      let resSN = this.$route.query.resSN
      this.$router.push({
        path: '/scenic/Ordersynthesis',
        query: {
          resSN: resSN,
          gSN: gSN
        }
      })
    },
    swiper (data) {
      // console.log(data)
      this.$route.query.resSN = data
      // console.log(this.$route.query.resSN)
      window.scroll(0, 0)
      this.Detailsdata()
      this.Ticketdata()
    },
    Detailsdata () {
      let self = this
      let data = {
        resSN: this.$route.query.resSN // 标识
      }
      resourceDetails(data).then(res => { // 详情数据请求
        console.log(res)
        this.images = res.Item.FocusImgs
        this.scenicspots = res.Item
        this.center.lng = res.Item.Lng
        this.center.lat = res.Item.Lat
      })
    },
    Ticketdata () {
      let self = this

      let data = {
        resSN: this.$route.query.resSN // 标识
      }
      goodsList(data).then(res => { // 门票数据请求
        console.log(res)
        self.Ticketdd = res.List
      })
    },
    Listdata () {
      let data = {}
      ScenicSpotsList(data).then(res => {
        console.log(res)
        this.List = res.List
      })
    },

    likedataA (num) {
      let data = {
        SN: this.$route.query.resSN,
        Type: num,
        Module: 'Resource'
      }
      
      MyMarkDo(data).then(res => {
        console.log(res)
        if (res.Code === 0) {
          // this.Detailsdata()
          this.scenicspots.LikeNum = res.Num
          if (res.DoType == 'Del') {
            this.scenicspots.IsLike = false
          } else {
            this.scenicspots.IsLike = true
          }
        } else {
          this.$router.push({
            path: '/Login/Phonelogin'
          })
        }
      })
    },
    likedataB (num) {
      let data = {
        SN: this.$route.query.resSN,
        Type: num,
        Module: 'Resource'
      }
      MyMarkDo(data).then(res => {
        // console.log(res);
        if (res.Code == 0) {
          this.scenicspots.CollectNum = res.Num
          if (res.DoType == 'Add') {
            this.scenicspots.IsCollect = true
          } else {
            this.scenicspots.IsCollect = false
          }
        } else {
          this.$router.push({
            path: '/Login/Phonelogin'
          })
        }
      })
    },

    tuijian () {
      let data = {
        pageNo: 1,
        Category: 1
      }
      resourceList(data).then(res => {
        // console.log(res)
        this.datares = res.List
      })
    }
  },

  mounted () {
    this.Detailsdata()
    this.Ticketdata()
    this.tuijian()
    // this.Listdata();
  }
}
</script>

<style lang="scss">
.product {
  background: #f8f8f8;

  .centerditu {
    color: white !important;
  }
  .bj {
    .van-nav-bar {
      z-index: 9 !important;

      .van-icon {
        color: white !important;
      }
    }
  }

  .product-content {
    padding: 10px 10px;
    margin-top: 10px;
    background: white;

    .img {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .swipe {
    width: 100%;
    height: 200px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .swipe_swipe {
      width: 100%;
      height: 100%;
      position: absolute;

      .swipe_img img {
        width: 100%;
        height: 100%;
      }
    }
  }

  /* 介绍样式 */
  .introduction {
    width: 100%;
    background: #ffffff;
    border-radius: 0.9375rem 0.9375rem 0 0;
    margin-top: -0.9375rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #858585;

    .introduction-details {
      width: 90%;
      .introduction-title {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
      }

      .introduction-notice {
        display: flex;
        justify-content: space-between;
      }

      .introduction-time {
        height: 2.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .navigation {
        width: 100%;
        display: flex;

        div {
          width: 50%;
          height: 40px;
          text-align: center;
          line-height: 40px;
        }
      }

      .map {
        width: 100%;
        height: 100%;
      }

      .introduction-label {
        display: flex;
        align-items: center;
        flex-grow: 1;
      }

      .menus-top {
        position: fixed;
        top: 46px;
        width: 100%;
        margin-top: 0;
        background-color: #f6f6f6;
      }
    }
  }

  .menus-top {
    position: fixed;
    top: 46px;
    width: 100%;
    margin-top: 0;
    background-color: #f6f6f6;
    z-index: 99;
  }

  .box2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;

    .menu-item {
      width: 50%;
      line-height: 40px;
      font-size: 14px;
      background: #ffffff;
      text-align: center;
    }

    .active {
      background: #46d0ca;
      color: #ffffff;
    }
  }

  /* 购票样式 */
  .purchase {
    width: 100%;
    margin-top: 10px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #858585;
    background: #ffffff;

    .purchase-all {
      width: 90%;
    }

    .purchase-top {
      display: flex;
      align-items: center;
      height: 40px;
    }

    .purchase-ticket {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100px;
      border-bottom: 1px solid #ebebeb;
      font-size: 15px;
    }
  }

  /* 用户点评 */
  .comment {
    width: 100%;
    margin-top: 10px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #858585;
    background: #ffffff;

    .comment-box {
      width: 90%;
      .zan {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0px 10px;
        height: 30px;
        width: 100px;
        min-width: 80px;
        color: white;
        background: #999999;
      }

      .likeactive {
        background: #46d0ca;
      }
    }
  }

  /* 其他推荐 */
  .recommend {
    width: 100%;
    margin-top: 10px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #858585;
    background: #ffffff;

    .recommend-box {
      width: 90%;
    }
  }
}
</style>
